import React from 'react'
import Layout from '../core/Layout'
import { Typography, Divider, Select  } from 'antd';
import { isAuth } from '../../helper/auth'
import { API } from '../../config'
import axios from 'axios'
import { useState, useEffect } from 'react'
import dateformat from "dateformat"

const { Title } = Typography
const { Option } = Select

export default function Order() {
	const { user: { _id }, token } = isAuth()
	const [orderCount, setOrderCount] = useState([])

	async function loadOrder() {
		let { data } = await axios.get(`${API}/order/list/${_id}`, {
			headers: {
				Authorization: `Bearer ${token}`
			}
		})
		setOrderCount(data);
	}
	function orderNum() {
		return orderCount.length > 0
			? `您的订单数量是 ${orderCount.length}`
			: "您还没有订单"
	}

	function getStatus(status) {
		switch (status) {
			case "Unpaid":
				return "未付款"
			case "Paid":
				return "已付款"
			case "Shipped":
				return "运输中"
			case "Completed":
				return "已完成"
			case "Cancelled":
				return "已取消"
		}
	}

	useEffect(() => {
		loadOrder()
	}, []) // eslint-disable-line react-hooks/exhaustive-deps
	
	const handleChange = orderId => status => {
		axios.put(`${API}/order/status/${_id}`,
			{ orderId, status },
			{
				headers: {
					Authorization: `Bearer ${token}`
				}
			}
		).then(()=>{
			loadOrder()
		})
	}
	
	return (
		<>
			<Layout title="订单列表" subTitle={orderNum()}>
				{
					orderCount.map(item => (
						<div key={item._id}>
							<Title level={5}>订单ID: {item._id}</Title>
							<table style={{ width: "100%" }}>
								<thead className="ant-table-thead">
									<tr>
										<th className="ant-table-cell">订单状态</th>
										<th className="ant-table-cell">订单号</th>
										<th className="ant-table-cell">总价</th>
										<th className="ant-table-cell">创建时间</th>
										<th className="ant-table-cell">邮寄地址</th>
										<th className="ant-table-cell">客户姓名</th>
									</tr>
								</thead>
								<tbody className="ant-table-tbody">
									<tr className="ant-table-row">
										<td className="ant-table-cell">
											{getStatus(item.status)}
											<Select defaultValue={item.status} onChange={handleChange(item._id)}>
												<Option value="Unpaid">未付款</Option>
												<Option value="Paid">已付款</Option>
												<Option value="Shipped">运输中</Option>
												<Option value="Completed">已完成</Option>
												<Option value="Cancelled">已取消</Option>
											</Select>
										</td>
										<td className="ant-table-cell">{item.trade_no}</td>
										<td className="ant-table-cell">{item.amount}</td>
										<td className="ant-table-cell">{dateformat(item.createdAt, 'yyyy-mm-dd')}</td>
										<td className="ant-table-cell">{item.address}</td>
										<td className="ant-table-cell">{item.user}</td>
									</tr>
								</tbody>
							</table>
							<table style={{ width: "100%" }}>
								<thead className="ant-table-thead">
									<tr>
										<th className="ant-table-cell">商品名称</th>
										<th className="ant-table-cell">商品价格</th>
										<th className="ant-table-cell">商品数量</th>
										<th className="ant-table-cell">商品ID</th>
									</tr>
								</thead>
								<tbody className="ant-table-tbody">
									{item.products.map(product => {
										return (
											<tr className="ant-table-row" key={item._id}>
												<td className="ant-table-cell">{product.product.name}</td>
												<td className="ant-table-cell">{product.product.price}</td>
												<td className="ant-table-cell">{product.count}</td>
												<td className="ant-table-cell">{product.product._id}</td>
											</tr>
										)

									})}
								</tbody>
							</table>
							<Divider />

						</div>

					))
				}
			</Layout>
		</>
	)
}
